import { h } from 'vue';

import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';

import { Button, Image, Tag, Switch } from 'ant-design-vue';

import { useVbenForm } from './form';
import { useDictStore } from '#/store/dict';
import ImageViewer from '#/components/custom/imageViewer/index.vue';
import { ref } from 'vue';
import { message } from 'ant-design-vue';

const { getDictLabel } = useDictStore();

setupVbenVxeTable({
  configVxeTable: (vxeUI) => {
    vxeUI.setConfig({
      grid: {
        align: 'center',
        border: false,
        columnConfig: {
          resizable: true,
        },
        scrollY: {
          enabled: true,
          gt: 0,
        },
        minHeight: 240,
        formConfig: {
          // 全局禁用vxe-table的表单配置，使用formOptions
          enabled: false,
        },
        proxyConfig: {
          autoLoad: true,
          response: {
            result: 'data.records',
            total: 'data.total',
            list: 'data.records',
          },
          showActiveMsg: true,
          showResponseMsg: false,
        },
        round: true,
        showOverflow: true,
        size: 'small',
      },
    });

    // 表格配置项可以用 cellRender: { name: 'CellImage' },
    vxeUI.renderer.add('CellImage', {
      renderTableDefault(renderOpts, params) {
        const props: any = renderOpts?.props;
        const { column, row } = params;
        // const { width, height } = props;
        return h('div', { 'v-viewer': true, padding: '10px' }, [
          h(Image, { src: row[column.field], preview: false }),
        ]);
      },
    });

    vxeUI.renderer.add('CellLink', {
      renderTableDefault(renderOpts) {
        const { props } = renderOpts;
        return h(
          Button,
          { size: 'small', type: 'link' },
          { default: () => props?.text },
        );
      },
    });

    // 字典
    vxeUI.renderer.add('CellDict', {
      renderTableDefault(renderOpts, params) {
        const { props } = renderOpts;
        const { column, row } = params;
        return h(
          Tag,
          {
            color: props?.color,
            style: {
              margin: '0',
            },
          },
          {
            default: () =>
              props?.dictData
                ? props?.dictData.find(
                    (item: any) => item.value == row[column?.field],
                  )?.label
                : getDictLabel(props?.dictType, row[column?.field]),
          },
        );
      },
    });

    // 图片预览
    vxeUI.renderer.add('CellImageViewer', {
      renderTableDefault(renderOpts, params) {
        const { props } = renderOpts;
        const { column, row } = params;
        return h(ImageViewer, { src: row[column?.field], ...props });
      },
    });

    vxeUI.renderer.add('CellSwitch', {
      renderTableDefault(renderOpts, params) {
        const { props } = renderOpts;
        const { column, row } = params;
        let loading = ref<boolean>(false);
        return h(Switch, {
          checkedValue: props?.checkedValue,
          checked: row[column?.field],
          loading: loading.value,
          onClick: async () => {
            // if (loading.value) return;
            row[column?.field] = row[column?.field] == 1 ? 0 : 1;
            let queryParams = {
              [column?.field]: row[column?.field],
              [props?.idKey]: row[props?.idKey],
              ids: row[props?.idKey],
            };
            loading.value = true;
            let res: any = await props?.changeQuery(queryParams);
            if (res.code == 100) {
              message.success(res.message);
            } else {
              row[column?.field] = row[column?.field] == 1 ? 0 : 1;
              message.error(res.message);
            }
            // setTimeout(() => {
            // loading.value = false;
            // }, 800);
          },
        });
      },
    });

    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
    // vxeUI.formats.add
  },
  useVbenForm,
});

export { useVbenVxeGrid };

export type * from '@vben/plugins/vxe-table';
